<template>
    <div class="con1">
        <div class="login1">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="用户名" prop="username">
                    <el-input type="text" v-model="ruleForm.username" autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off" size="small"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass">
                    <el-input type="password" v-model="ruleForm.checkPass" size="small" style="width: 100%;"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="register()">注册</el-button>
                    <el-button type="primary" size="small" @click="tologin()">已有用户去登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script >
import axios from 'axios'
axios.defaults.withCredentials = true;
export default {
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if (this.ruleForm.checkPass !== '') {
                    this.$refs.ruleForm.validateField('checkPass');
                }
                callback();
            }
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            }
            else {
                callback();
            }
        };
        var validatePass3 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入用户名'));
            }
            else {
                callback();
            }
        };
        return {
            ruleForm: {
                pass: '',
                checkPass: '',
                username: ''
            },
            rules: {
                username: [{
                    validator: validatePass3,
                    trigger: 'blur'
                }],
                pass: [{
                    validator: validatePass,
                    trigger: 'blur'
                }],
                checkPass: [{
                    validator: validatePass2,
                    trigger: 'blur'
                }]
            },
        };
    },
    methods: {
        async register() {
            await this.$axios.post('http://localhost:3000/register',
             {
                userName: this.ruleForm.username,
                pwd: this.ruleForm.pass,
            })
            .then(res => {
                console.log(res.data);
                if (res.data.code == 200) {
                    this.$router.push('/login')
                    alert('是否返回登录页面')
                } 
                if (res.data.code == 400) {
                    alert('用户名已存在')
                } 
            })
            .catch(err => {
                console.log('操作失败' + err);
            })
            },
            tologin(){
                this.$router.push("/login")
            }
        }
}
</script>

<style>
.con1 {
    background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.htxbFNCjI15gIKSm-t490wHaEI?w=297&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7);
    display: flex;
    justify-content: flex-end;
}

.login1 {
    background-color: white;
    width: 300px;
    padding: 100px 60px;
}
</style>